@charset "UTF-8";



body{background:#eee;margin:0;padding:0}
.example{
	background:#FFF;
	position: relative;
	background-image: url(img/bj_01.jpg);
	background-size: 100%;
}
 

.yue{
	width: 100px;
	height: 100px;

	position: absolute;
	top:55%;left:50%;
	margin: -50px 0px 0px -50px;
	background-image: url(img/yueliang.png);
	background-size: 100%;
	animation-duration: 1.4s;
	-webkit-animation-duration: 1.4s;
	-moz-animation-duration: 1.4s;
	animation-timing-function:   Linear ;
	-webkit-animation-timing-function:   Linear ;
	-moz-animation-timing-function:   Linear ;
	z-index: 999999999;
}


.active,.left,.right{
	position: absolute;	
    font-weight: bolder;
    font-family: -webkit-pictograph;
    letter-spacing: 2px;
    font-size: 20px;
	
}
.active{
	/*background-image: url(img/bj_15.jpg);*/
	top: 2%;left:72%;z-index: 9999999;
	color: rgba(255,255,255,0.8);
	font-size: 16px;
}
.left,.right{
	color: #fff;
	width: 100px;
	height: 26px;
	margin: -50px 0px 0px -13px;
	background-size: 100%;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	animation-timing-function:   Linear ;
	-webkit-animation-timing-function:   Linear;
	-moz-animation-timing-function:   Linear;
	opacity: 0; 
	-webkit-opacity: 0;
	-moz-opacity: 0;
	z-index: 9999999;
}
.left{
	/*background-image: url(img/bj_15.jpg);*/
	top: 61%;left:34%;
}
.right{	
	/*background-image: url(img/bj_18.jpg);*/
	top: 61%;left: 70%;
}




.tow {
    transform: rotatex(50deg);
    -webkit-transform: rotatex(50deg);
    -moz-transform: rotatex(50deg);
    position: absolute;
    top:63%;z-index: 100;
	left: 50%;
	
}


.tow span {
	z-index: 100;
	display: block;
	width: 0px;
	height: 0px;
	background-color: transparent;
	color: black;
	text-align: center;
	border-radius: 50%;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border:2px #1e1f3e solid;
	opacity: 0;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	position: absolute;
	box-shadow: 2px 2px 2px #3c2e63;
	
	
	
	animation-duration: 3s;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	animation-timing-function:   ease-out;
	-webkit-animation-timing-function:  ease-out;
	-moz-animation-timing-function:   ease-out;
}
















.tow span :after{
    content:(+1); 
    display:block;
    position:absolute;
    top:0;
    right:5px;
    font-style: normal;
    color:rgba(255,115,0,0);
}
.tow span .rise:after{
    .animation(up 1s linear);
}
.keyframes(~'up,0%{ width: 0px;	height:0px;	opacity: 1; 	-webkit-opacity: 1;	-moz-opacity: 1;}	100%{	width: 200px;margin:-100px  0px 0px 100px;		height: 200px;		opacity: 0; -webkit-opacity: 0;	-moz-opacity: 0;}');




.wave{
	
}
@keyframes spin {
	0%{ 
		width: 0px;
		height:0px;
			opacity: 1; 
			-webkit-opacity: 1;
			-moz-opacity: 1;
	}
	100%{
		width: 200px;margin:-100px  0px 0px -100px;
		height: 200px;			
		opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;
	}
}
@-webkit-keyframes spin {
	0%{ 
		width: 0px;
		height:0px;
			opacity: 1; 
			-webkit-opacity: 1;
			-moz-opacity: 1;
	}
	100%{
		width: 200px;margin:-100px  0px 0px -100px;
		height: 200px;			
		opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;
	}
}
@-moz-keyframes spin {
	0%{ 
		width: 0px;
		height:0px;
			opacity: 1; 
			-webkit-opacity: 1;
			-moz-opacity: 1;
	}
	100%{
		width: 200px;margin:-100px  0px 0px -100px;
		height: 200px;
					opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;
	}
}


@keyframes rotate {
	0%{ transform: rotateY(0deg);-moz-transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}
	100%{ transform: rotateY(360deg);-moz-transform: rotateY(360deg);-webkit-transform: rotateY(360deg);}
}
@-webkit-keyframes rotate {
	0%{ transform: rotateY(0deg);-moz-transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}
	100%{ transform: rotateY(360deg);-moz-transform: rotateY(360deg);-webkit-transform: rotateY(360deg);}
}
@-moz-keyframes rotate {
	0%{ transform: rotateY(0deg);-moz-transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}
	100%{ transform: rotateY(360deg);-moz-transform: rotateY(360deg);-webkit-transform: rotateY(360deg);}
}


@keyframes yue {
	
	0%{ 
			opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;
			top:50%;
		}	
	50% {
			opacity: 1; 
			-webkit-opacity: 1;
			-moz-opacity: 1;
			 top:50%;
		 }
	100%{
			opacity: 1; 
			-webkit-opacity: 1;
			-moz-opacity: 1;
			top:55%;
		}
}
@-webkit-keyframes yue {
	0%{ 
			opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;
			top:50%;
		}	
	50% {
			opacity: 1; 
			-webkit-opacity: 1;
			-moz-opacity: 1;
			 top:50%;
		 }
	100%{
			opacity: 1; 
			-webkit-opacity: 1;
			-moz-opacity: 1;
			top:55%;
		}
}
@-webkit-keyframes yue {
	0%{ 
			opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;
			top:50%;
		}	
	50% {
			opacity: 1; 
			-webkit-opacity: 1;
			-moz-opacity: 1;
			 top:50%;
		 }
	100%{
			opacity: 1; 
			-webkit-opacity: 1;
			-moz-opacity: 1;
			top:55%;
		}
}


@keyframes left {
	0%{ left: -25%;
			opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;}
	100%{ left: 34%;}
}
@-webkit-keyframes left {
	0%{ left: -25%;opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;}
	100%{ left: 34%;}
}
@-moz-keyframes left {
	0%{ left: -25%;opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;}
	100%{ left: 34%;}
}


@keyframes right {
	0%{
		opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;
		 left: 100%;
	}
	100%{ 
		left: 70%;
		}
}
@-wenkit-keyframes right {
	0%{ 
		left: 100%;
		opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;
		}
	100%{ 
		left: 70%;
		}
}
@-moz-keyframes right {
	0%{ 
		left: 100%;
		opacity: 0; 
			-webkit-opacity: 0;
			-moz-opacity: 0;
		}
	100%{ l
	eft: 70%;
	}
}